<template>
	<div class="audio_player">
		<div class="audio_body"></div>
		<aplayer :music="musicData" mutex></aplayer>
	</div>
</template>

<script>
import aplayer from 'vue-aplayer';
export default {
	name: 'voicePlayer',
	components: { aplayer },
	props: {
		fileSrc: String,
		data: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			musicData: {}
		};
	},
	watch: {
		fileSrc(url) {
			this.musicData = {
				title: this.data.oldName,
				artist: this.data.createName,
				url
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.audio_player::v-deep {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	.aplayer {
		margin: 0;
		.aplayer-body {
			.aplayer-info {
				height: 100px;
				padding: 10px 16px;
				.aplayer-music {
					line-height: 24px;
					.aplayer-title {
						display: block;
					}
				}
			}
		}
	}
	.aplayer-controller {
		.aplayer-time {
			font-size: 14px;
		}
	}
	.aplayer-bar-wrap {
		.aplayer-bar {
			height: 6px;
			.aplayer-loaded {
				height: 6px;
			}
			.aplayer-played {
				.aplayer-thumb {
					margin-top: -3px;
				}
			}
		}
	}
	.aplayer-pic {
		width: 100px;
		height: 100px;
	}
}
</style>
